<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>关注的课程</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type="text/javascript" src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<!-- 这里是页面内容区 -->
<div class="page">
    <!-- 头部-->
    <div class="head-no-toolbar bg-self-green no-left-icon">
        <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
        <span class="c-white t-center">关注的课程</span>
    </div>

    <div class="content pull-to-refresh-content t-0" data-ptr-distance="20">
        <div class="pull-to-refresh-layer">
            <div class="preloader"></div>
            <div class="pull-to-refresh-arrow"></div>
        </div>
        <div id="focusCourseList" class="train-card focus-course">
            <!--<div class="item">-->
            <!--<a load="public/pag../course.html" class="item-link item-content external" progress="false">-->
            <!--<img class="px-img" src="../images/lunbo.jpg" width="50%" alt=""/>-->
            <!--<div class="p-5 bg-white">-->
            <!--<p class="c-default">android基础培训</p>-->
            <!--</div>-->
            <!--</a>-->
            <!--<a class="p-5 bg-white cancel">-->
            <!--<i class="icon iconfont">&#xe61c;</i>取消关注-->
            <!--</a>-->
            <!--</div>-->
            <!--<div class="item">-->
            <!--<a load="public/pag../course.html" class="item-link item-content external" progress="false">-->
            <!--<img class="px-img" src="../images/lunbo.jpg" width="50%" alt=""/>-->
            <!--<div class="p-5 bg-white">-->
            <!--<p class="c-default">android基础培训</p>-->
            <!--</div>-->
            <!--</a>-->
            <!--<a class="p-5 bg-white cancel">-->
            <!--<i class="icon iconfont">&#xe61c;</i>取消关注-->
            <!--</a>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
<!-- 培训列表模版 -->
<script id="focus-course-list" type="text/template">
    {@each courseList as it, index}
    <div class="item">
        <div class="item-content bg-white">
            <a data-class-type-id="&{it.CLASS_TYPE_ID}" class="item-link item-content external focus-main-train"
               progress="false">
                <div class="img-wrap">
                    <img class="px-img" src="&{it.CLASS_TYPE_PIC}" width="50%" alt=""/>
                </div>

                {@if (it.CLASS_TYPE_NAME != null) && (it.CLASS_TYPE_NAME != '')}
                <div class="p-5 bg-white">
                    <p class="c-default">&{it.CLASS_TYPE_NAME}</p>
                </div>
                {@/if}
            </a>
            <a data-follow-id="&{it.FOLLOW_ID}" class="p-5 bg-white cancel focusClick">
                <i class="icon iconfont">&#xe61c;</i>取消关注
            </a>
        </div>
    </div>
    {@/each}
</script>

<script type="text/javascript">
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        var userInfo = getLoginStudentInfo();
        var sql = "SELECT T.*,A.CLASS_TYPE_PIC,A.CLASS_TYPE_NAME FROM E_FOLLOW_CLASS T  LEFT JOIN b_class_type A ON T.CLASS_TYPE_ID = A.CLASS_TYPE_ID WHERE T.STATE = '1' AND T.STUDENT_ID = '{0}' ";

        var sql2 = "UPDATE E_FOLLOW_CLASS T SET T.STATE = '0', T.CANCEL_DATE = NOW() WHERE T.FOLLOW_ID IN ({0})";

        var page = 1;
        if (isNotNull(userInfo)) {
            sql = sql.format(userInfo.STUDENT_ID);
            dbQuery(page, 10, sql, true, function (ret, err) {
                if (isObject(ret)&&ret.statusCode == 0) {
                    if (ret.result.length > 0) {
                        var courseData = {
                            courseList: ret.result,
                            url: getUrl(),
                        };

                        // 添加默认图片
                        $.each(courseData.courseList, function (i, e) {
                            if (isEmpty(e.CLASS_TYPE_PIC)) {
                                e.CLASS_TYPE_PIC = "../images/no_jpg.jpg";
                            } else {
                                e.CLASS_TYPE_PIC = "{0}{1}".format(courseData.url, e.CLASS_TYPE_PIC);
                            }
                        });

                        $("#focusCourseList").html(juicer($("#focus-course-list").html(), courseData));
                    } else {
                        toast("暂无关注的课程");
                    }
                }
            });
        }

        // 下拉刷新关注的课程
        $(document).on("refresh", ".pull-to-refresh-content", function () {
            if (isObject(userInfo) && isNumber(userInfo.STUDENT_ID)) {
                page++;
                // 获取就业单位
                dbQuery(page, 10, sql.format(userInfo.STUDENT_ID), false, function (ret, err) {
                    if (isObject(ret) && (ret.statusCode == 0)) {
                        var courseData = {
                            courseList: ret.result,
                            url: getUrl(),
                        };

                        if (courseData.courseList.length > 0) {
                            // 添加默认图片
                            $.each(courseData.courseList, function (i, e) {
                                if (isEmpty(e.CLASS_TYPE_PIC)) {
                                    e.CLASS_TYPE_PIC = "../images/no_jpg.jpg";
                                } else {
                                    e.CLASS_TYPE_PIC = "{0}{1}".format(courseData.url, e.CLASS_TYPE_PIC);
                                }
                            });

                            $("#focusCourseList").prepend(juicer($("#focus-course-list").html(), courseData));
                        } else {
                            toast("已加载完毕");
                            page--;
                        }
                    }

                    $.pullToRefreshDone(".pull-to-refresh-content");
                });
            }
        });

        $("#focusCourseList").on("click", ".focusClick", function () {
            var $this = $(this);
            var followId = $this.data("followId");
            sql2 = sql2.format(followId);
            dbExecute(sql2, true, function (ret, err) {
                if (ret.statusCode == 0) {
                    toast("取消关注成功");
                    location.reload();

                } else {
                    toast("取消关注失败，稍后再试");
                }
            });
        });


        $("#focusCourseList").on("click", ".focus-main-train", function () {
            var $this = $(this);
            var classTypeId = $this.data("classTypeId");

            openWin("my-focus-course-info", "course.html", {
                classTypeId: classTypeId
            });
        });

        //接收课程事件并刷新
        api.addEventListener({
            name: 'courseEvent'
        }, function (ret, err) {
            location.reload();
        });
    };
</script>
<script>$.init();</script>
</body>
</html>
